<template>
	<!-- 事件配置 -->
	<n-collapse arrow-placement="right" :default-expanded-names="['1']">
		<ChartEventInteraction />
		<BaseEvent />
	</n-collapse>
</template>

<script setup>
import BaseEvent from './BaseEvent.vue';
import ChartEventInteraction from './ChartEventInteraction';
</script>

<style lang="scss" scoped>
:deep() {
	.n-layout,
	.n-layout-sider {
		background-color: transparent;
	}
	.collapse-show-box {
		.n-card__content {
			padding-left: 20px;
			padding-right: 10px;
		}
	}
	.go-editor-area {
		max-height: 530px;
	}
	.checkbox--hidden:checked {
		& + label {
			.n-icon {
				transition: all 0.3s;
				transform: rotate(180deg);
			}
		}
		& ~ .go-editor-area {
			display: none;
		}
	}
	// 优化代码换行
	.n-code > pre {
		white-space: break-spaces;
	}
}
</style>
